<template>
<div class="flex top-box">
  <!-- 导航栏功能区 -->
  <!-- <div class="Uploadbox flex" v-if="isShowtopIcon">
    <div class="Newbuild" @click='uploadFileFn'>
      <img src="../../assets/img/filelist/upload.png" alt="" class="newfile upload">
      上传
    </div>
    <div class="Newbuild" @click='newFileFn' v-if="fileNum == 0">
      <img src="../../assets/img/filelist/new.png" alt="" class="newfile">
      新建
    </div>
  </div> -->
    <div class="catalog-box flex">
        <div class="goback-box flex" @click="gobackFn">
            <img src="../../assets/img/search/goback.png" alt="">
            <span>返回</span>
        </div>
        <div class="line"></div>
        <!-- 面包屑导航栏 ====> 文件路径 -->
        <div class="filepath-box flex" >
            <p :title="txt" @click="tabTotaltitleFn" style="margin-right:7px;">{{txt}}</p>
            <div class="flex tabbox" v-for="(item) in location" @mouseenter='showPosition(item[0])' @mouseleave='hidePosition(item[0])'>
                <img src="../../assets/img/search/next.png" alt="">
                <p :title="item[0]=='…'?'':item[1]" @click="toOtherpageFn(item)"  >{{item[0]}}</p> 
                <div class="title flex" v-if="isShow && item[0]=='…'">
                  <p v-for="(e,i) in positionTxt">
                    <span @click="tohideOtherpageFn(e)">{{e}}</span>
                    <img src="../../assets/img/search/next.png" alt="" v-if="i !== 0">
                  </p>                   
                </div>
            </div>
        </div>
    </div>
    <searchBtn @searchContent="searchContentFn"/>
</div>
</template>

<script>
import searchBtn from "./searchBtn";
export default {
  components: {
    searchBtn
  },
  props: {
    fileNum: Number
  },
  watch: {
    filepath() {
      this.location = this.$store.state.filePath;
      this.showallName = this.location;
      var str = '';
      if(this.location.length == 0){
        str = ''
      }else{
        this.location.forEach((item,index) => {
          str += (item + "/");
        })
        this.filepathFn()
        if (str.length > 0) {
            str = str.substr(0, str.length - 1);
        }
      }
      sessionStorage.setItem('path',str)
    }
  },
  computed: {
    filepath() {
      return this.$store.state.filePath;
    }
  },
  data() {
    return {
      isShow: false,
      isShowtopIcon: false, //控制面包屑一行中的新建以及上传按钮
      location: [], //经过处理的文件路径
      positionTxt:[],
      showallName: [], //未经处理的文件路径
      filelistData:[],  //文件夹数组
      txt:'公司文件'
    };
  },
  mounted() {
    // this.location = this.$store.state.filePath;
    if(sessionStorage.getItem('path')){
      this.location = sessionStorage.getItem('path').split("/");
    }
    
    // console.log(this.location)
    this.showallName = this.location;
    this.filepathFn()
    if(sessionStorage.getItem('type')){
      switch(sessionStorage.getItem('type')){
        case '1':
        this.txt = '个人文件';
        break;
        case '2':
        this.txt = '公司文件';
        break;
        case '3':
        this.txt = '回收站';
        break;
      }
    }
  },
  methods: {
    // 点击面包屑导航栏公司文件等根目录
    tabTotaltitleFn(){
      this.location = [];
      // 调用根文件下的文件信息
      
      this.$store.commit("getFilepath", [])
      // console.log(sessionStorage.getItem('type') == 3)
      if(sessionStorage.getItem('type') == 3){
        var id = ''
        this.recycleList(id)
      }else{
        this.filefloderdata('')
      }
    },
    // 文件处理格式   当文件超过4个文件夹时候，用省略号代替
    filepathFn(){
      if (this.location.length + 1 > 4) {
      var arr = this.location.slice(0, 1); //arr title数组
      var littlearr = [];
      this.location.forEach((e, i) => {
        if (i >= 1 && i <= this.location.length - 3) {
          littlearr.push(e)
        }
      });
      this.positionTxt = littlearr;
      arr.push(littlearr);
      const sliceArr = this.location.slice(-2);
      sliceArr.forEach(item => {
        arr.push(item);
      });
      this.dealNamefn(arr);
      this.location[1][0] = "…";
    }else{
      this.positionTxt = this.location;
      this.dealNamefn(this.location);
    }
    },
    // 点击返回
    gobackFn() {
      window.history.go(-1);
    },
    // 点击面包屑层级跳转页面
    toOtherpageFn(e) {
      if (e[0] === "…") {
        this.dealNamefn(this.showallName);
      }else{
        this.tofilePageFn(e[1])
      }
    },
    // 点击省略号悬浮框中的文件路径
    tohideOtherpageFn(e){
      this.tofilePageFn(e)
    },
    // 点击面包屑文件跳转文件菜单页面
    tofilePageFn(e){
      this.$store.state.filePath.forEach((item,i) => {    
        if(item == e){
          var arr = [];
          arr = this.$store.state.filePath.slice(0,i+1)
          this.$emit('getnewFilepath',arr)
        }
      })
        this.location = this.showallName;
        var str = '';
        this.location.forEach((item,index) => {
          if(item == e){
            this.location = this.location.slice(0,index+1)
            this.location.forEach((e,i) =>{
                str += (e + "/");
            })

          }
        })
        this.showallName = this.location;
        this.filepathFn()
        if (str.length > 0) {
            str = str.substr(0, str.length - 1);
        }
        sessionStorage.setItem('path',str)
        // str 为传送给后台接口的path值   调用接口
        this.filefloderdata(str)
    },
    // 公司及个人文件列表
    async filefloderdata(path) {
      var params = {'path': '/' + path};
      var res = await this.$https.post('File/ListFile',params)
      this.filelistData = res.data.result;
      this.$emit('filelistData', this.filelistData)
    },
    // 回收站列表
    async recycleList(id){
      var params = {id:id}
      var res = await this.$https.post("Recycle/getRecycleList",params);
      if(res.success){
        this.filelistData = res.data.list;
        this.$emit('filelistData', this.filelistData)
      }
    },
    // 文件名处理函数  组成二维数组 赋予p标签item = item[0]值与title = item[1]值
    dealNamefn(arr) {
      var namearr = []; //显示出来的文字不得超过6个字的文件名数组
      arr.forEach(item => {
        if (item.length > 6) {
          item = item.substring(0, 6) + "…";
        }
        namearr.push(item);
      });
      var newarr = namearr.map((v, k) => [v, arr[k]]);
      this.location = newarr;
    },
    // 点击新建文件夹
    newFileFn() {
      this.$emit("addNewFile", "true");
    },
    // 点击搜索
    searchContentFn(data) {
      // console.log(data)
      this.$emit("searchResult", data);
    },
    // 点击上传文件夹
    uploadFileFn() {},

    // 鼠标移入面包屑div，内容为…  title显示
    showPosition(txt) {
      if (txt == "…") {
        this.isShow = true;
      }else{
        return;
      }
    },
    // 鼠标移出面包屑div，title消失
    hidePosition(txt){
      this.isShow = false;
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../assets/css/common/topcatalog.less);
</style>


